<!-- 学社 - 服务 - 服务记录 -->
<template>
  <view>
    <z-navbar title="邀请码设置" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
    <!-- 服务时间 -->
    <view class="py-4 px-4">
      <view class="mb-4 c-#333 text-32 font-bold">邀请码有效期</view>
      <view class="mb-3 bg-#F6F6F6 rounded-md flex items-center h-68 px-2" @click="state.showStartTimePicker = true">
        <image class="w-28 h-28" src="/static/images/home/ic_date.png"></image>
        <view class="c-#333 text-28 font-bold ml-2">开始时间</view>
        <view class="flex-1 c-#999 text-28 ml-8">{{ state.qrcode_start_time ?? '请选择成交时间' }}</view>
        <image class="w-24 h-14" src="/static/images/home/ic_arrow_b.png"></image>
      </view>
      <u-picker v-model="state.showStartTimePicker" mode="time" :params="params" confirm-color="#F4AF22"
        @confirm="onDateConfirm('qrcode_start_time', $event)" />
      <view class="mb-3 bg-#F6F6F6 rounded-md flex items-center h-68 px-2" @click="state.showEndTimePicker = true">
        <image class="w-28 h-28" src="/static/images/home/ic_date.png"></image>
        <view class="c-#333 text-28 font-bold ml-2">结束时间</view>
        <view class="flex-1 c-#999 text-28 ml-8">{{ state.qrcode_end_time ?? '请选择结束时间' }}</view>
        <image class="w-24 h-14" src="/static/images/home/ic_arrow_b.png"></image>
      </view>
      <u-picker v-model="state.showEndTimePicker" mode="time" :params="params" confirm-color="#F4AF22"
        @confirm="onDateConfirm('qrcode_end_time', $event)" />
      <view class="flex items-center justify-between">
        <view class="c-#333 text-28 font-bold ml-2">是否开启邀请码有效期</view>
        <u-switch v-model="state.qrcode_open" size="45" active-color="#F4AF22" inactive-color="#f6f6f6"></u-switch>
      </view>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="btn-submit" @click="onSave">保存</view>
    </view>
  </view>
</template>

<script setup>
import { showToast,navigateBack } from '@/common/util/uni';
import { postSetQrcode } from '@/common/http/module/society.js'
import { refreshPrePage } from '@/common/util/util'
const state = reactive({
  club_id: '',
  qrcode_start_time: '',
  qrcode_end_time: '',
  qrcode_open: false,
  showStartTimePicker: false,
  showEndTimePicker: false,
});
const params = {
  year: true,
  month: true,
  day: true,
  hour: true,
  minute: true,
  second: false
}

function onDateConfirm(type, e) {
  const { year, month, day, hour, minute } = e
  state[type] = `${year}-${month}-${day} ${hour}:${minute}`
}

function onSave() {
  postSetQrcode({
    club_id: state.club_id,
    qrcode_open: state.qrcode_open ? 1 : 0,
    qrcode_start_time: state.qrcode_start_time,
    qrcode_end_time: state.qrcode_end_time
  }).then(() => {
    showToast('保存成功')
    navigateBack()
    refreshPrePage('loadDetail')
  })
}
onLoad((options) => {
  state.club_id = options.club_id
  state.qrcode_start_time = options.qrcode_start_time
  state.qrcode_end_time = options.qrcode_end_time
  state.qrcode_open = options.qrcode_open == 1 ? true : false
})
</script>

<style lang="scss" scoped></style>
